import {  Platform, ScrollView, StyleSheet, Text, View } from "react-native";
import React from "react";
import { ButtonDemo } from "./Button/ButtonDemo";
import { CheckboxDemo } from "./Checkbox/CheckboxDemo";
import { ComboBoxDemo } from "./Combobox/Combobox";
import { DialogDemo } from "./Dialog";
import { ListBoxDemo } from "./Listbox/ListBoxDemo";
import { MeduDemo,MeduSectionDemo } from "./Menu";
import { ControlledSwitch,ControlledSwitchToggle } from "./Switch";
import { Disclosure } from "./Disclosure/Disclosure";
import { TabsDemo } from "./Tabs/TabsDemo";
import { SliderDemo } from "./Slider/SliderDemo";
import { RadioDemo } from "./Radio/RadioDemo";
import { PopoverDemo } from "./Popover";
import { OverlayContainerDemo } from "./Overlays";


export default function AriaDemo() {

  return (
    <ScrollView style={styles.container}>
      <ComboBoxDemo />
      <OverlayContainerDemo />
      <PopoverDemo/>
      <DialogDemo />
      <ButtonDemo/>
      <CheckboxDemo />
      <Disclosure />
      <ListBoxDemo />
      <ControlledSwitch />
      <ControlledSwitchToggle />
      <TabsDemo/>
      <SliderDemo />
      <RadioDemo />
      <MeduSectionDemo />
      <MeduDemo />
      {/* android 报错 */}
    </ScrollView>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    width:'100%',
    height:'100%',
    paddingHorizontal:20,
    marginBottom:40,
    marginTop: Platform.OS === 'ios' ? 50 : 0
  },

  item: {
    paddingLeft: 30,
    width: '100%',
    height: 100,
    flexDirection: 'row'
  },
  image: {
    width: 100,
    height: 100,
  },
  label: {
    marginTop: 50,
    width: '100%',
    fontSize: 30,
    textAlign: 'center',
  },
  label2: {
    width: '100%',
    fontSize: 16,
    textAlign: 'center',
  },
});
